$imgCount : 8;


.wrapper {
  h3 {
    font-size: 36px;
  }

  .container {
    position: relative;

    .stage {
      position           : relative;
      width              : 800px;
      height             : 240px;
      margin             : 20px auto;
      perspective        : 2000px;
      transform-style    : preserve-3d;
      -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, .5));

      .control {
        position       : relative;
        width          : 100%;
        height         : 100%;
        transform-style: preserve-3d;
        transform      : translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
        animation      : rotate 30s linear infinite;

        .imgWrap {
          position       : absolute;
          width          : 400px;
          height         : 400px;
          top            : 50%;
          left           : 50%;
          transform      : translate(-50%, -50%);
          transform-style: preserve-3d;

          .img {
            position        : absolute;
            width           : 500px;
            height          : 400px;
            line-height     : 400px;
            text-align      : center;
            font-size       : 120px;
            top             : 0;
            left            : 0;
            transform-style : preserve-3d;
            transform-origin: 50% 50% 0px;
          }

          img {
            width     : 100%;
            height    : 100%;
            object-fit: cover;
          }

          @for $i from 1 through $imgCount {
            .img#{$i} {
              transform:
                rotateY(35 + ($i * 45deg)) translateZ(650px);
            }
          }

        }
      }
    }
  }
}




@keyframes rotate {
  0% {
    transform: translateZ(-2000px) rotateY(0deg);
  }

  50% {
    transform: translateZ(-2000px) rotateY(-360deg);
  }

  100% {
    transform: translateZ(-2000px) rotateY(-720deg);
  }
}